<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><![endif]-->
<!DOCTYPE html>
<html>
<head>
    <title>Grapheditor</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="styles/grapheditor.css">
	<script type="text/javascript">
		// Public global variables
		var MAX_REQUEST_SIZE = 10485760;
		var MAX_AREA = 10000 * 10000;

		// URLs for save and export
		var EXPORT_URL = '/export';
		var SAVE_URL = '/save';
		var OPEN_URL = '/open';
		var RESOURCES_PATH = 'resources';
		var RESOURCE_BASE = RESOURCES_PATH + '/grapheditor';
		var STENCIL_PATH = 'stencils';
		var IMAGE_PATH = 'images';
		var STYLE_PATH = 'styles';
		var CSS_PATH = 'styles';
		var OPEN_FORM = 'open.html';

		// Specifies connection mode for touch devices (at least one should be true)
		var tapAndHoldStartsConnection = true;
		var showConnectorImg = false;

		// Parses URL parameters. Supported parameters are:
		// - lang=xy: Specifies the language of the user interface.
		// - touch=1: Enables a touch-style user interface.
		// - storage=local: Enables HTML5 local storage.
		// - chrome=0: Chromeless mode.
		var urlParams = (function(url)
		{
			var result = new Object();
			var idx = url.lastIndexOf('?');

			if (idx > 0)
			{
				var params = url.substring(idx + 1).split('&');

				for (var i = 0; i < params.length; i++)
				{
					idx = params[i].indexOf('=');

					if (idx > 0)
					{
						result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
					}
				}
			}

			return result;
		})(window.location.href);

		// Sets the base path, the UI language via URL param and configures the
		// supported languages to avoid 404s. The loading of all core language
		// resources is disabled as all required resources are in grapheditor.
		// properties. Note that in this example the loading of two resource
		// files (the special bundle and the default bundle) is disabled to
		// save a GET request. This requires that all resources be present in
		// each properties file since only one file is loaded.
		mxLoadResources = true;
		mxBasePath = '../../../src';
        mxLanguages = ['cn'];
        mxLanguage = mxLanguages[0] || urlParams['lang'];

    </script>
	<script type="text/javascript" src="jscolor/jscolor.js"></script>
	<script type="text/javascript" src="sanitizer/sanitizer.min.js"></script>
	<script type="text/javascript" src="../../../src/js/mxClient.js"></script>
	<script type="text/javascript" src="js/EditorUi.js"></script>
	<script type="text/javascript" src="js/Editor.js"></script>
	<script type="text/javascript" src="js/Sidebar.js"></script>
	<script type="text/javascript" src="js/Graph.js"></script>
	<script type="text/javascript" src="js/Shapes.js"></script>
	<script type="text/javascript" src="js/Actions.js"></script>
	<script type="text/javascript" src="js/Menus.js"></script>
	<script type="text/javascript" src="js/Format.js"></script>
	<script type="text/javascript" src="js/Toolbar.js"></script>
	<script type="text/javascript" src="js/Dialogs.js"></script>
</head>
<body class="geEditor">
	<script type="text/javascript">

        mxSwimlane.prototype.imageSize = 16;
        mxSwimlane.prototype.imageDx = 155;
        mxSwimlane.prototype.imageDy = 10;

        mxGraph.prototype.collapsedImage = new mxImage('../../../../images/expand.png', 20, 20);
        mxGraph.prototype.expandedImage = new mxImage('../../../../images/expand.png', 20, 20);

        mxGraph.prototype.aaimage = new mxImage('../../../../images/na.png', 20, 20);
        // Changes swimlane icon bounds
        /**
         * 重写这个方法，主要是自己的图标大小、位置（包括表的图标和聚焦的图标）
         * @param x
         * @param y
         * @param w
         * @param h
         * @returns {mxRectangle}
         */
        mxSwimlane.prototype.getImageBounds = function(x, y, w, h)

        {
            return new mxRectangle(x + this.imageDx, y + this.imageDy, this.imageSize, this.imageSize);
        };

        /**
         * 自定义图标内容和事件，重写这个方法添加图标
         * @param c
         * @param x
         * @param y
         * @param w
         * @param h
         */
        mxSwimlane.prototype.paintVertexShape = function(c, x, y, w, h)
        {
            var start = this.getTitleSize();
            var fill = mxUtils.getValue(this.style, mxConstants.STYLE_SWIMLANE_FILLCOLOR, mxConstants.NONE);
            var swimlaneLine = mxUtils.getValue(this.style, mxConstants.STYLE_SWIMLANE_LINE, 1) == 1;
            var r = 0;

            if (this.isHorizontal())
            {
                start = Math.min(start, h);
            }
            else
            {
                start = Math.min(start, w);
            }

            c.translate(x, y);

            if (!this.isRounded)
            {
                this.paintSwimlane(c, x, y, w, h, start, fill, swimlaneLine);
            }
            else
            {
                r = this.getArcSize(w, h, start);
                this.paintRoundedSwimlane(c, x, y, w, h, start, r, fill, swimlaneLine);
            }

            var sep = mxUtils.getValue(this.style, mxConstants.STYLE_SEPARATORCOLOR, mxConstants.NONE);
            this.paintSeparator(c, x, y, w, h, start, sep);

            if (this.image != null)
            {
                console.log(this.image);
                var bounds = this.getImageBounds(x, y, w, h);
                c.pointerEvents = true;
                c.image(bounds.x - x-140, bounds.y - y, bounds.width, bounds.height,
                        "../../../../images/id.png", false, false, false);
                c.image(bounds.x - x-10, bounds.y - y, bounds.width, bounds.height,
                        this.image, false, false, false);
                var image = c.root.lastChild;
                mxEvent.addListener(image, 'click', function(){
                    alert(123);
                });
                image.style.cursor = "pointer";
            }

            if (this.glass)
            {
                c.setShadow(false);
                this.paintGlassEffect(c, 0, 0, w, start, r);
            }
        };

        /**
         * 重写这个方法，设置展开和合并按钮的位置
         * @param state
         * @param w
         * @param h
         * @returns {*}
         */
        mxCellRenderer.prototype.getControlBounds = function(state, w, h)
        {
            if (state.control != null)
            {
                var s = state.view.scale;
                var cx = state.getCenterX();
                var cy = state.getCenterY();

                if (!state.view.graph.getModel().isEdge(state.cell))
                {
                    cx = state.x + w * s;
                    cy = state.y + h * s;

                    if (state.shape != null)
                    {
                        // TODO: Factor out common code
                        var rot = state.shape.getShapeRotation();

                        if (this.legacyControlPosition)
                        {
                            rot = mxUtils.getValue(state.style, mxConstants.STYLE_ROTATION, 0);
                        }
                        else
                        {
                            if (state.shape.isPaintBoundsInverted())
                            {
                                var t = (state.width - state.height) / 2;
                                cx += t;
                                cy -= t;
                            }
                        }

                        if (rot != 0)
                        {
                            var rad = mxUtils.toRadians(rot);
                            var cos = Math.cos(rad);
                            var sin = Math.sin(rad);

                            var point = mxUtils.getRotatedPoint(new mxPoint(cx, cy), cos, sin,
                                    new mxPoint(state.getCenterX(), state.getCenterY()));
                            cx = point.x;
                            cy = point.y;
                        }
                    }
                }

                return (state.view.graph.getModel().isEdge(state.cell)) ?
                        new mxRectangle(Math.round(cx - w / 2 * s), Math.round(cy - h / 2 * s), Math.round(w * s), Math.round(h * s))
                        : new mxRectangle(Math.round(cx - w / 2 * s)+state.width-40, Math.round(cy - h / 2 * s), Math.round(w * s), Math.round(h * s));
            }

            return null;
        };


        mxConstants.ARROW_CUSTOM_MANY='many' ;
        mxConstants.ARROW_CUSTOM_SINGLE='single' ;
        //canvas, shape, type, pe, unitX, unitY, size, source, sw, filled
        mxMarker.markers[mxConstants.ARROW_CUSTOM_MANY] = function(canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) {
            size = 12;
            var a = size / 3;
            var pt = pe.clone();
            var ylen = -20 * unitY;
            var xlen = Math.sqrt((400 - ylen*ylen));
            xlen = 20 * unitX;
            var x = pe.x -xlen;// - a*unitX -a ;//
            var y = pe.y + ylen;// - a * unitY - a;// +
            //                canvas.moveTo(pt.x, pt.y);
            //                canvas.lineTo(pt.x - unitX - unitY / 2, pt.y - unitY + unitX / 2);
            //
            //                if (type == mxConstants.ARROW_CLASSIC)
            //                {
            //                    canvas.lineTo(pt.x - unitX * 3 / 4, pt.y - unitY * 3 / 4);
            //                }
            //
            //                canvas.lineTo(pt.x + unitY / 2 - unitX, pt.y - unitY - unitX / 2);
            return function()
            {
                canvas.ellipse(x - size/2,y - size/2,size,size);//可以兼容
                canvas.addNode(false,true);//perfect
                canvas.begin();
                canvas.moveTo(pe.x - 14 *unitX , pe.y - 14 * unitY);
                var distance1 = 14 * Math.tan(Math.PI/6);
                var targetx = distance1*unitX,targety =- distance1*unitY;
                canvas.lineTo(pe.x - targety, pe.y - targetx);
                canvas.moveTo(pe.x - 14 *unitX , pe.y - 14 * unitY);
                canvas.lineTo(pe.x + targety, pe.y + targetx);
                canvas.moveTo(pe.x - 14 *unitX +14 * unitY, pe.y - 14 * unitY - 14*unitX);
                canvas.lineTo(pe.x - 14 *unitX -14 * unitY, pe.y - 14 * unitY + 14*unitX);
//                canvas.begin();
//                canvas.moveTo(pt.x-2, pt.y+2);
//                canvas.lineTo(pt.x +12, pt.y -3);
//                canvas.addNode(true,true);//perfect
//                canvas.close();

               // canvas.addNode(true,true);
//                var elem = canvas.createElement('ellipse');
//                elem.setAttribute('cx', pe.x);
//                elem.setAttribute('cy', pe.y);
//                elem.setAttribute('rx', 5);
//                elem.setAttribute('ry', 5);
//                elem.setAttribute("fill","none");
//                elem.setAttribute("stroke","#000000");
//                canvas.root.appendChild(elem);
//                var path = canvas.createElement('path');
//                canvas.root.appendChild(path);//来画线
                filled = false;
                if (filled)
                {
                    canvas.fillAndStroke();
                }
                else
                {
                    canvas.stroke();
                }
            };
        };


        mxMarker.markers[mxConstants.ARROW_CUSTOM_SINGLE] = function(canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) {
            size = 12;
            var a = size / 3;
            var pt = pe.clone();
            var ylen = -20 * unitY;
            var xlen = Math.sqrt((400 - ylen*ylen));
            xlen = 20 * unitX;
            var x = pe.x -xlen;// - a*unitX -a ;//
            var y = pe.y + ylen;// - a * unitY - a;// +
            return function()
            {
                canvas.begin();
                canvas.moveTo(pe.x - 14 *unitX +14 * unitY, pe.y - 14 * unitY - 14*unitX);
                canvas.lineTo(pe.x - 14 *unitX -14 * unitY, pe.y - 14 * unitY + 14*unitX);
                filled = false;
                if (filled)
                {
                    canvas.fillAndStroke();
                }
                else
                {
                    canvas.stroke();
                }
            };
        };
        mxMarker.markers["color"] = function(canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) {
        	var root = canvas.root;
        	var colors = ["red","blue","green","yellow"];
        		var i = 0;
        		var timer = setInterval(function(){
        	var paths = root.getElementsByTagName("path");
        	if(paths.length > 0){
        		var path = paths[paths.length-1];
        			path.setAttribute("stroke",colors[i++]);
        	}
        			if(i ==4) i = 0;
        			if(--time==0) clearInterval(timer);
        		},1000);
        	
      };
        // Extends EditorUi to update I/O action states
		(function()
		{
			var editorUiInit = EditorUi.prototype.init;

			EditorUi.prototype.init = function()
			{
				editorUiInit.apply(this, arguments);
				this.actions.get('export').setEnabled(false);

				// Updates action states which require a backend
				if (!useLocalStorage)
				{
					mxUtils.post(OPEN_URL, '', mxUtils.bind(this, function(req)
					{
						var enabled = req.getStatus() != 404;
						this.actions.get('open').setEnabled(enabled || fileSupport);
						this.actions.get('import').setEnabled(enabled || fileSupport);
						this.actions.get('save').setEnabled(enabled);
						this.actions.get('saveAs').setEnabled(enabled);
						this.actions.get('export').setEnabled(enabled);
					}));
				}
			};
		})();

        var editior4ui  = new EditorUi(new Editor(urlParams['chrome'] == '0'));
        var graph = editior4ui.editor.graph;
        graph.setTooltips(true);
        graph.getTooltipForCell = function(cell)
        {
            var value = cell.getValue();
            var defaultParent = cell.getParent().getParent();
            if(defaultParent == graph.getDefaultParent()){
                value = cell.getParent().getValue();
            }
            return value;
        }
        graph.setCellsCloneable(false);
         graph.setCellsEditable(false);
        //graph.setConnectable(true);
        document.body.onkeydown = function(evt){
        	var keyCode = evt.keyCode;
        	if(keyCode == 79){
        		//debugger;
        	}
        };
        
	</script>
</body>
</html>
